<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.storyroad.responseClasses.FollowObject"%>
<%@ page import="java.util.ArrayList"%>

<%
	ArrayList<FollowObject> followed = (ArrayList<FollowObject>)request.getAttribute("followedPeople");
%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

    <title>Following</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom styles for this template -->
    <link href="css/following.css" rel="stylesheet">
    
  </head>
   
  <body background="img/back_nologo.png">
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <img src="img/logo_writing.png" id="top_logo">
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="MainPage">Home Page</a></li>
            <li><a href="GetRecommendations">Recommendations</a></li>
            <li><a href="Search.jsp">Search Stories</a></li>
            <li class="active"><a href="GetFollowers">Following</a></li>
          </ul>
          <ul class="nav navbar-nav" id="profile_buttons">
            <li><a href="GetProfile">My Profile</a></li>
            <li><a href="Logout">Logout</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
    
    <div class="container">    
      <div class="well sidebar-nav" id="following-page-container">
        <h2><center>Followed Users</center></h2>  
      </div>         
      <div class="well sidebar-nav" id="following-page-container">
      <%if(followed.size()==0){ %>
      	<h2><center>You are not following any users.</center></h2>
      <%}else{ %>
      <%for(int i=0;i<followed.size();i++){ %>
        <div id="user" class="active">
          <div id = "profile-img"><img src="<%out.print(followed.get(i).getPhotoLink()); %>" alt="Profile Photo" height="100" width="100"></div>
          <div id="user-info">
            <h3 id="username"><%out.print(followed.get(i).getUsername()); %></h3>               
            <p id="info"><%out.print(followed.get(i).getFollowerCount()); %> followers</p>
            <%
            	String stories = "";
            	for(int j=0;j<followed.get(i).getStoryTitles().length-1;j++){
            		if(followed.get(i).getStoryTitles()[j] == null) break;
            		stories += followed.get(i).getStoryTitles()[j]+", ";
            	}
            	if(followed.get(i).getStoryTitles().length>0 && followed.get(i).getStoryTitles()[followed.get(i).getStoryTitles().length-1]!=null){
            		stories += followed.get(i).getStoryTitles()[followed.get(i).getStoryTitles().length-1];
            	}
            	if(followed.get(i).getStoryTitles().length>4){
            		stories += "...";
            	}
            %>
            <p id="info"><b style="color:#2E64FE">Stories: </b><%out.print(stories); %></p>           
          </div>        
          <div id="gotoprofile-button"><button type="button" onclick='window.location="GetProfile?targetname=<%out.print(followed.get(i).getUsername());%>"'
          	class="btn btn-primary btn-default">Go to profile</button></div>
           <div id="unfollow-button"><button type="button"  onclick='window.location="Unfollow?f_username=<%out.print(followed.get(i).getUsername()); %>"'
           class="btn btn-danger btn-default">Unfollow</button></div>
        </div>
        <%}} %>
      </div>
    </div>    
  </body>
</html>